<template>
  <div class="content-wrap">
    <div style="margin-bottom: 20px;">
      <a-button type="primary" icon="plus" @click="plusRoles">添加角色</a-button>
    </div>
    <a-table class="table" :rowKey="row => row.uuid" :dataSource="list" :pagination="pagination" :loading="loading"
      @change="handleTableChange">
      <a-table-column title="名称" dataIndex="name" key="name" />
      <a-table-column title="描述" dataIndex="description" key="description" />
      <a-table-column title="权限" key="perm_codes" width="200px">
        <template slot-scope="row">
          <a href="javascript:;" @click="handleView(row)">查看权限</a>
          <!-- <div class="perm-code"><span v-for="item in row.perm_codes" :key="item">{{ item }}&nbsp;</span></div> -->
        </template>
      </a-table-column>
      <a-table-column title="操作" key="action">
        <template slot-scope="row">
          <span>
            <a href="javascript:;" @click="handleEdit(row)">编辑</a>
            <a-divider type="vertical" />
            <a href="javascript:;" @click="handleDlete(row)">删除</a>
          </span>
        </template>
      </a-table-column>
    </a-table>

    <a-modal title="查看权限" style="top: 100px;" :visible="isView" width="850px" @ok="isView = false" @cancel="isView = false">
      <div class="permission">
        <div class="item" v-for="(item, index) in permissionsList" :key="index">
          <div class="label">{{ item.title }}：</div>
          <div class="value">
            <a-checkbox-group v-model="checkedList">
              <a-checkbox disabled :value="`${item.key}_${sub.key}`" v-for="sub in item.permissions"
                :key="sub.key">{{ sub.title }}</a-checkbox>
            </a-checkbox-group>
          </div>
        </div>
      </div>
    </a-modal>

    <a-modal :title="actionTitle" style="top: 100px;" :visible="visible" width="600px" @ok="handleOk" @cancel="handleCancel">
      <a-form :form="form">
        <a-form-item label="角色名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input v-decorator="[
              'name',
              {rules: [{ required: true, message: '请输入角色名称' }]}
            ]" />
        </a-form-item>
        <a-form-item label="角色描述" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-textarea :autosize="{ minRows: 2, maxRows: 6 }" v-decorator="[
              'description'
            ]" />
        </a-form-item>
        <a-form-item label="角色权限" :label-col="{ span: 4 }" :wrapper-col="{ span: 24 }">
          <div class="permission">
            <a-checkbox-group v-model="checkedList" :defaultValue="checkedList">
            <div class="bian" v-for="(item, index) in permissionsList" :key="index">
              <div class="item">
                <div class="label">{{ item.title }}：</div>
                <div class="value">
                    <a-checkbox :value="`${item.key}_${sub.key}`" v-for="sub in item.permissions" :key="sub.key">{{ sub.title }}</a-checkbox>
                </div>
              </div>
              <div class="item it" v-for="(it, ind) in item.children" :key="ind">
                <div class="label">{{ it.title }}：</div>
                <div class="value">
                    <a-checkbox :value="`${it.key}_${sub.key}`" v-for="sub in it.permissions" :key="sub.key">{{ sub.title }}</a-checkbox>
                </div>
              </div>
            </div>
            </a-checkbox-group>
          </div>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
  // import { getRoleList, createRole, updateRole, deleteRole } from '@/api/manage'
  import permissionsList from '@/utils/permissions'
  const tempCheck = {}

  export default {
    name: 'Roles',
    data() {
      return {
        isView: false,
        loading: false,
        list: [],
        page: 1,
        per_page: 10,
        total: 0,
        visible: false,
        form: this.$form.createForm(this),
        checkedList: [],
        currentRole: {},
        actionType: 0, // 0为创建角色，1为编辑角色
        permissionsList,
        // permissionText: []
      }
    },
    computed: {
      pagination() {
        return {
          defaultPageSize: this.per_page,
          defaultCurrent: this.page,
          total: this.total
        }
      },
      actionTitle() {
        return this.actionType === 0 ? '创建角色' : '编辑角色'
      }
    },
    created() {
      permissionsList.forEach(item => {
        // this.permissionText.push({
        //   title: item.title,
        //   code: item.key,

        // })
        tempCheck[item.key] = []
      })

      this.fetch()
    },
    methods: {
      // getPermissions () {
      //   const arr = []
      //   Object.keys(permissions).forEach((item) => {
      //     arr.push({
      //       value: item,
      //       label: permissions[item]
      //     })
      //   })
      //   return arr
      // },
      // getPermissionText (codes) {
      //   const arr = []
      //   codes.forEach(item => {
      //     arr.push(permissions[item])
      //   })
      //   return arr.join('、')
      // },
      handleDlete(row) {
        this.$confirm({
          title: '提示',
          content: `确认删除角色 “${row.name}” ？`,
          onOk: () => {
            return new Promise((resolve, reject) => {
              this.$api.emit('admin.role.destory', row.uuid).then(res => {
                this.fetch()
                resolve()
              }).catch(err => {
                reject(err)
              })
            })
          }
        })
      },
      handleView(row) {
        this.isView = true
        this.currentRole = row
        this.checkedList = JSON.parse(JSON.stringify(row.perm_codes))
      },
      handleEdit(row) {
        this.visible = true
        this.actionType = 1
        this.currentRole = row
        this.$nextTick(() => {
          this.form.setFields({
            name: {
              value: row.name
            },
            description: {
              value: row.description
            }
          })
        })
        this.checkedList = JSON.parse(JSON.stringify(row.perm_codes))
      },
      handleOk() {
        this.form.validateFields(['name', 'description'], {
          force: true
        }, (err, values) => {
          if (!err) {
            const sendData = {
              name: values.name,
              description: values.description,
              perms: this.checkedList
            }
            if (this.actionType === 0) {
              this.$api.emit('admin.role.store', sendData).then(res => {
                this.visible = false
                this.fetch()
              })
            } else {
              this.$api.emit('admin.role.update', this.currentRole.uuid, sendData).then(res => {
                this.visible = false
                this.fetch()
              })
            }
          }
        })
      },
      handleCancel() {
        this.visible = false
      },
      plusRoles() {
        this.visible = true
        this.actionType = 0
        this.checkedList = []
        this.form.resetFields()
      },
      handleTableChange(pagination, filters, sorter) {
        this.page = pagination.current
        this.fetch()
      },
      fetch() {
        this.loading = true
        this.$api.emit('admin.role.list', {
          page: this.page,
          per_page: this.per_page
        }).then(res => {
          this.list = res.data.list
          this.total = res.data.item_total
        }).finally(() => {
          this.loading = false
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .table {
    background-color: #fff;
  }

  .perm-code {
    word-break: break-all;
  }

  .permission {
    .item {
      display: flex;
      margin-bottom: 10px;

      .label {
        width: 180px;
        text-align: right;
      }

      .value {
        flex: 1;
      }
    }
    .it{
      margin-left: 40px;
    }
  }
  .bian{
      border-width: 1px;
      border-color: red;
      border-style: dashed;  
  }
</style>
